{#----------------------------------------------------------------------------#}
{# Подключаемые стили #}
{% macro STYLES() -%}
  <link href="/static/css/text_editor.css" rel="stylesheet" type="text/css" />
  <style>
    .toolbar-item {
      display: inline-block;
      outline: 0;
      padding: 0 5px 0 0;
      vertical-align: middle;
    }

    .toolbar-separator {
    border-left: 1px solid #ddd;
    height: 36px;
    }

    .markdown_result_container>table {
      border: 1px solid #dee2e6;
    }
    .markdown_result_container>table th {
      border: 1px solid #dee2e6;
    }
    .markdown_result_container>table td {
      border: 1px solid #dee2e6;
    }
  </style>
{%- endmacro %}
{#
  Аргументы:

  * tab_id - идентификатор переключателя, использовать
      в TAB_SWITCHER.DOCUMENT_READY_SCRIPT()

  * result_id - идентификатор div-а с результатом, использовать
      в markdownToHtml(source_id, target_id)

  * field_name - имя поля целевого элемента и уникальный идентификатор
      соответствующей текстовой области

  * field_value - текущее значение поля элемента

  * is_required - является ли поле ввода textarea обязательным
#}
{% macro INPUT(
    tab_id,
    result_id,
    field_name,
    field_value="",
    is_required=False)
-%}
  <ul class="nav nav-tabs" id="{{ tab_id }}" role="tablist">
    <li class="nav-item" role="presentation">
      <button
        class="nav-link active"
        id="{{ tab_id }}-edit-tab"
        data-bs-toggle="tab"
        data-bs-target="#{{ tab_id }}-edit"
        type="button"
        role="tab"
        aria-controls="{{ tab_id }}-edit"
        aria-selected="true">Редактор</button>
    </li>
    <li class="nav-item" role="presentation">
      <button
        class="nav-link"
        id="{{ tab_id }}-view-tab"
        data-bs-toggle="tab"
        data-bs-target="#{{ tab_id }}-view"
        type="button"
        role="tab"
        aria-controls="{{ tab_id }}-view"
        aria-selected="false">Просмотр</button>
    </li>
  </ul>
  <div class="tab-content" id="{{ tab_id }}Content">
    <div
      class="tab-pane fade show active"
      id="{{ tab_id }}-edit"
      role="tabpanel"
      aria-labelledby="{{ tab_id }}-edit-tab">
        <div class="edit-parent">
          <div class='edit-controls'>
            <div class='btn-group'>
              <a class='btn button-edit' data-role='bold'
                  onclick="$('#{{ field_name }}').insertOverCaret('**', '**')">
                <b>Bold</b>
              </a>
              <a class='btn button-edit' data-role='italic'
                  onclick="$('#{{ field_name }}').insertOverCaret('*', '*')">
                <em>Italic</em>
              </a>
              <a class='btn button-edit' data-role='underline'
                  onclick="$('#{{ field_name }}').insertOverCaret('__', '__')">
                <u><b>U</b></u>
              </a>
              <a class='btn button-edit' data-role='strikeThrough'
                  onclick="$('#{{ field_name }}').insertOverCaret('~~', '~~')">
                <strike>abc</strike>
              </a>
            </div>
            <div class="toolbar-item"><div class="toolbar-separator"></div></div>
            <div class='btn-group'>
              <a class='btn button-edit' data-role='h1'
                  onclick="$('#{{ field_name }}').insertOverCaret('\n\n# ')">
                H1
              </a>
              <a class='btn button-edit' data-role='h2'
                  onclick="$('#{{ field_name }}').insertOverCaret('\n\n## ')">
                H2
              </a>
              <a class='btn button-edit' data-role='h3'
                  onclick="$('#{{ field_name }}').insertOverCaret('\n\n### ')">
                H3
              </a>
              <a class='btn button-edit' data-role='h4'
                  onclick="$('#{{ field_name }}').insertOverCaret('\n\n#### ')">
                H4
              </a>
            </div>
            <div class="toolbar-item"><div class="toolbar-separator"></div></div>
            <div class='btn-group'>
              <a class='btn button-edit' data-role='insertUnorderedList'
                  onclick="$('#{{ field_name }}').insertOverCaret('\n* ')">
                <i class="bi bi-list-ul"></i>
              </a>
              <a class='btn button-edit' data-role='insertOrderedList'
                  onclick="$('#{{ field_name }}').insertOverCaret('\n1. ')">
                <i class="bi bi-list-ol"></i>
              </a>
              <a class='btn button-edit' data-role='insertOrderedList'
                  onclick="$('#{{ field_name }}').insertOverCaret('\n - [x] ')">
                <i class="bi bi-list-check"></i>
              </a>
            </div>
            <div class="toolbar-item"><div class="toolbar-separator"></div></div>
            <div class='btn-group'>
              <a class='btn button-edit' data-role='image'
                  onclick="$('#{{ field_name }}').insertOverCaret('![](http://', ')')">
                <i class="bi bi-image-fill"></i>
              </a>
              <a class='btn button-edit' data-role='outdent'
                  onclick="$('#{{ field_name }}').insertOverCaret('[', '](http://)')">
                <i class="bi bi-link-45deg"></i>
              </a>
            </div>
            <div class="toolbar-item"><div class="toolbar-separator"></div></div>
            <div class='btn-group'>
              <a class='btn button-edit' data-role='stable'
                  onclick="$('#{{ field_name }}').insertAtCaret('\n| Столбец 1 | Столбец 2 | Столбец 3 |\n| --- | --- | --- |\n| Ячейка | | |\n')">
                <i class="bi bi-table"></i>
              </a>
              <a class='btn button-edit' data-role='code'
                  onclick="$('#{{ field_name }}').insertOverCaret('`', '`')">
                <i class="bi bi-code"></i>
              </a>
              <a class='btn button-edit' data-role='code-square'
                  onclick="$('#{{ field_name }}').insertOverCaret('\n```\n', '\n```\n')">
                <i class="bi bi-code-square"></i>
              </a>
            </div>
          </div>
        </div>
        <textarea
            name="{{ field_name }}"
            class="form-control"
            id="{{ field_name }}"
            rows="9"
            onchange="markdownToHtml('{{ field_name }}', '{{ result_id }}')"
            {% if is_required %}required{% endif %}>
          {{- field_value -}}
        </textarea>
    </div>
    <div
        class="tab-pane fade"
        id="{{ tab_id }}-view"
        role="tabpanel"
        aria-labelledby="{{ tab_id }}-view-tab">
      <div class="markdown_result_container" id="{{ result_id }}"></div>
    </div>
  </div>
{%- endmacro %}

{#
  Использовать один раз на странице.
  Добавляет функцию markdownToHtml(source_id, target_id).
#}
{% macro SCRIPTS() -%}
  <script src="/static/js/showdown.min.js"></script>
  <script>
    converter = new showdown.Converter(),
    converter.setOption('tables', true);
    converter.setOption('tasklists', true);
    converter.setOption('underline', true);
    converter.setOption('strikethrough', true);
    converter.setOption('simpleLineBreaks', true);
    converter.setOption('simplifiedAutoLink', true);
    converter.setOption('openLinksInNewWindow', true);

    function markdownToHtml(source_id, target_id) {
      $("#" + target_id).html(
        converter.makeHtml(
          html_escape_over_code_blocks(
            $("#" + source_id).val()
          )
        )
      );
    }

    /* {#
      insertAtCaret
        jquery-функция осуществляет вставку строки в поле ввода там, где
        расположен курсор или вместо выделенного фрагмента

      insertOverCaret
        jquery-функция осуществляет вставку двух строк в поле ввода слева
        и справа от курсора (или выделенного фрагмента)
    #} */
    $.fn.extend({
        insertAtCaret: function(theValue) {
            this.each(function() {
                if (document.selection) {
                    this.focus();
                    var sel = document.selection.createRange();
                    sel.text = theValue;
                    this.focus();
                } else if (this.selectionStart || this.selectionStart == '0') {
                    var startPos = this.selectionStart;
                    var endPos = this.selectionEnd;
                    var scrollTop = this.scrollTop;
                    this.value = this.value.substring(0, startPos) +
                        theValue + this.value.substring(endPos, this.value.length);
                    this.focus();
                    this.selectionStart = startPos + theValue.length;
                    this.selectionEnd = startPos + theValue.length;
                    this.scrollTop = scrollTop;
                } else {
                    this.value += theValue;
                    this.focus();
                }
                this.onchange();
            });
            return this;
        },
        insertOverCaret: function(firstValue, secondValue='') {
            this.each(function() {
                if (document.selection) {
                    this.focus();
                    var sel = document.selection.createRange();
                    sel.text = firstValue + sel.text + secondValue;
                    this.focus();
                } else if (this.selectionStart || this.selectionStart == '0') {
                    var startPos = this.selectionStart;
                    var endPos = this.selectionEnd;
                    var scrollTop = this.scrollTop;
                    this.value = this.value.substring(0, startPos)
                        + firstValue + this.value.substring(startPos, endPos)
                        + secondValue
                        + this.value.substring(endPos, this.value.length);
                    this.focus();
                    this.selectionStart = startPos + firstValue.length;
                    this.selectionEnd = startPos + firstValue.length;
                    this.scrollTop = scrollTop;
                } else {
                    this.value += firstValue + secondValue;
                    this.focus();
                }
                this.onchange();
            });
            return this;
        }
    });
  </script>
{%- endmacro %}
